<template>
	<div class="bgimg">
		<div class="login">
			<div class="logo" >
				<img src="../assets/logo.png" style="width:60px;vertical-align: middle;" >
				<p style="display: inline-block;vertical-align: middle;font-size:25px;font-family:楷体">DD聊天</p>
			</div>
			<div class="form">
				<el-form
				:model="userName"
				:rules="rule"
				status-icon
				ref="userName"
				>
				<el-form-item prop="name"  style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-user" v-model="userName.name" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="pass" style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-lock" v-model="userName.pass" placeholder="请输入密码" type=passwrod show-password></el-input>
				</el-form-item>
				<el-form-item prop="code" style="width:60%;left:20%;position:relative;">
					<el-input prefix-icon="el-icon-place" v-model="userName.code" placeholder="验证码" style="width:50%;"></el-input>
					<el-tooltip content="看不清？换一张" placement="top" >
					<s-identify :identifyCode="identifyCode" class="get-code" @click.native="refreshCode()"></s-identify>
					</el-tooltip>
				</el-form-item>
				<el-form-item class="bottun">
					<el-button type="primary" @click="doLogin('userName')">登录</el-button>
					<el-button type="primary" style="margin-left:50px" @click="doRegister()">注册</el-button>
				</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import SIdentify  from '../components/sidentify.vue'

export default{
	components:{SIdentify},
	data(){
	let validateCode=(rule,value,callback) =>{
      if(value===''){
        callback(new Error('请输入验证码'))
      }else if(this.identifyCode.toLowerCase() === value.toLowerCase()){
        callback()
      }else{
		  callback(new Error('验证码有误,请重新输入'))
	  }
	};


		return{
			userName:{
				name:'',
				pass:'',
				code:'',

			},
			rule:{
				name:[{required: true, message: '请输入用户名', trigger: 'change'},
				{ min: 3, max: 6, message: '长度在 3 到 5 个字符', trigger: 'change' }
				],
				pass:[{required:true,message:'请输入密码',trigger:'change'}],
				code:[{validator:validateCode,trigger:'change'}]
			},
			identifyCode:'',
			identifyCodes:"123456789abcdwerwshdjeJKDHRJHKPLMKQ"
		}
	},
    mounted() {
    // 验证码初始化
    this.identifyCode = ''
	this.makeCode(this.identifyCodes, 4)
    },
	methods: {
		doLogin(formName){
			const _this = this
			this.$refs[formName].validate((valid) => {
				// if(valid){
          var form = {
            userName:this.userName.name,
            password:this.userName.pass
          }
			this.$axios.post('/api/login',form).then((data) =>{
            if(data.code == 200){
			  localStorage.setItem("token",data.token)
			  localStorage.setItem("fromUserId",data.id)
			  localStorage.setItem('username',form.userName)
			  localStorage.setItem('nowtime',new Date())
              this.$message.success(data.msg)
              this.$router.replace('/home')
            } else{
              this.$message.error(data.msg)
            }
					})
				// }
			})
		},

		doRegister(){
			this.$router.replace('/register')
		},

		refreshCode() {//
			this.identifyCode = '';
			this.makeCode(this.identifyCodes,4);
		},

		randomNum (min, max) {
			max = max + 1
			return Math.floor(Math.random() * (max - min) + min)
		},
		// 随机生成验证码字符串
		makeCode (data, len) {
			for (let i = 0; i < len; i++) {
			this.identifyCode += data[this.randomNum(0, data.length - 1)]
			}
		}

	}
}
</script>


<style scoped>
	
	.login{
		width: 400px;
		height: 400px;
		position: fixed;
		left: 50%;
		top: 50%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color:white;
		margin-left:-210px;
		margin-top:-200px;
	}
	.logo{
		position: relative;
		left: 30%;
	}
	.get-code{
		left: 51%;
		position: absolute;
		top: 6%;
		cursor: pointer;
		box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.bottun{
		left: 20%;
		position: absolute;

	}
	.bgimg {
		position: absolute;
		background: url(../assets/bg.png) no-repeat center;
		background-size: cover;
		height: 100%;
		width: 100%;
	}
</style>
<style>

</style>